<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/goods_detail.css"/>
</head>
<body>
	
    
    <div class="mui-content">
		<!-- swiper 图片轮播  轮播图宽高一致-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_1.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_2.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_3.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_4.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_5.jpg">
					</a>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		
		<!--内容-->
		<section class="goods">
			<!--商品-->
			<div class="price"><span>￥36.00</span><span>销量：9999</span></div>
			<p>原价：<s>￥46.00</s></p>
			<div class="mui-ellipsis-2">【沃洋优品】 印尼进口天然椰子水</div>
			<hr />
			<div class="goods_des">
				<div>商品描述</div>
				<p>这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，</p>
			</div>
		</section>
		<div>
			<img src="img/goods_img.jpg" alt="" />
		</div>
		
		<!--评论列表-->
		<div class="comment">
			<div>评论区</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div>12345678910 <span>2019-1-25 23:00</span></div>
					<p>
						这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，
					</p>
					<div class="comment_start">
						<img src="img/stars5.gif" />
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>12345678910 <span>2019-1-25 23:00</span></div>
					<p>
						这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，
					</p>
					<div class="comment_start">
						<img src="img/stars5.gif" />
					</div>
				</li>
			</ul>
		</div>
		<hr />
		<!--评论-->
		<form class="mui-input-group" id="comment_form">
		
			<!--星星-->
			<div id="star" class="steyy0">
				<div class="ste" data-id='1'></div>
				<div class="ste" data-id='2'></div>
				<div class="ste" data-id='3'></div>
				<div class="ste" data-id='4'></div>
				<div class="ste" data-id='5'></div>
			</div>
			<input type="hidden" id="starr" name="starr" value>
		
			<div class="textarea">
		
				<textarea name="des" rows="3"></textarea>
				<button type="submit" class="mui-btn mui-btn-blue">提交评论</button>
			</div>
		
		</form>
    </div>

    
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item" href="javascript:history.go(-1)">
            <span class="mui-icon mui-icon-back"></span>
        </a>
        <a href="merchant.html" class="mui-tab-item">
            <span class="mui-icon"><img src="img/shop_fill.png"/></span>
        </a>
        <a href="#" class="mui-tab-item" id="add_car">
            <span class="mui-tab-label">加入购物车</span>
        </a>
        <a href="shopping_cart.html" class="mui-tab-item">
            <span class="mui-tab-label">立刻购买</span>
        </a>
    </nav>
    
    <!--返回顶部-->
    <div id="backTop"><img src="img/top.png"/></div>
    <!--购物车-->
    <a href="shopping_cart.html" class="car"><img src="img/car.png"/></a>
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	var swiper = new Swiper('.swiper-container', {
			spaceBetween: 10,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			autoplay: {
				delay: 2500,
				disableOnInteraction: false,
			},
		});
		swiper.init()
		
		//星级
		$('.ste').click(function(){
			let id = $(this).data('id')
			$('#starr').val(id)
			$('#star').attr('class',`steyy${id}`)
		})
		
		$(document).scroll(()=>{
			let top = $(document).scrollTop()
			if(top>200){
				$('#backTop').fadeIn()
			}else{
				$('#backTop').fadeOut()
			}
		})
		
		$('#backTop').click(e=>{
			mui.scrollTo(0,500);
		})
		//加入购物车
		document.getElementById('add_car').addEventListener('tap',e=>{
			$.ajax({
					type:"get",
					url:``,
					async:true,
					success(data){
						data = true 	//假设添加成功
						if(data){
							mui.toast('添加成功')
						}else{
							mui.toast('添加失败')
						}
					},
					error(err){
						console.log(err.statusText)
					}
			})
		})
    </script>
</body>
</html>
